<template>
  <de-container class="pa-5">
    <avue-crud
      ref="crud"
      v-model="form"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :before-open="beforeOpen"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onSearchReset"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
      @filter-change="onFilterChange"
      @sort-change="onSortChange"
    >
      <template slot="menu" slot-scope="{ size, row }">
        <el-button type="text" icon="el-icon-plus" :size="size" @click="onAddSubClick(row)">新增子部门</el-button>
      </template>
    </avue-crud>
  </de-container>
</template>

<script>
import {
  requestDepartmentTreeList,
  requestDepartmentCreate,
  requestDepartmentUpdate,
  requestDepartmentDelete,
} from '@/api/system/dept'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'

export default {
  name: 'DepartmentList',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestDepartmentTreeList,
      createApi: requestDepartmentCreate,
      updateApi: requestDepartmentUpdate,
      deleteApi: requestDepartmentDelete,
      tableOption: {
        menuWidth: 240,
        selection: false,
        addTitle: '新增部门',
        editTitle: '编辑部门',
        viewTitle: '查看部门',
        searchMenuPosition: 'left',
        column: [
          {
            label: '部门名称',
            prop: 'name',
            search: true,
            maxlength: 24,
            showWordLimit: true,
            rules: [
              { required: true, message: '请输入部门名称' },
              { max: 24, message: '最多24个字' },
            ],
            span: 24,
            align: 'left',
            overHidden: true,
          },
          {
            label: '排序',
            prop: 'deptSort',
            type: 'number',
            min: 0,
            max: 2147483647,
            rules: [{ required: true, message: '请输入排序' }],
            span: 24,
          },
          {
            label: '创建时间',
            prop: 'createdAt',
            span: 24,
            width: 150,
            type: 'date',
            searchSpan: 8,
            searchslot: true,
            editDisplay: false,
            addDisplay: false,
            viewDisplay: false,
          },
        ],
      },
    }
  },
  methods: {
    beforeOpen(done, type) {
      if (type === 'add') {
        if (!this.form.pid) {
          this.form.pid = 0
        }
      }
      done()
    },
    onAddSubClick(row) {
      this.form.pid = row.id
      this.$refs.crud.rowAdd()
    },
    onRefresh() {
      this.loadListData(this.page, this.searchForm)
    },
  },
}
</script>

<style lang="scss"></style>
